<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>视差滚动</title>
<meta name="description" content="这是一个视觉差的演示demo" />
<meta name="keywords" content="视觉差滚动, parallax-scrolling, css, background" />
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta name="format-detection" content="telephone=no" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-touch-fullscreen" content="yes" />
</head>

<body>
<style type="text/css">
body {position:relative;padding:0;margin:0;font-family:'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', tahoma, arial, simsun, '宋体';}
h1 {position:fixed;right:5%;top:5%;font-size:16px;text-transform:uppercase;color:#fff;opacity:0.75;}

.ci-parallax section {
    width: 100%;
    height: 100%;
    min-height: 640px;
    background-color: #000;
    background-image: url(img/TolbachikVolcano_ZH-CN8980703058_1366x768.jpg);
    background-attachment: fixed;
    /*background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: 50% 50%;*/
}
.ci-parallax .section-1 {
    background-image: url(img/TolbachikVolcano_ZH-CN8980703058_1366x768.jpg);
}
.ci-parallax .section-2 {
    background-image: url(img/NorwegianFjords_ZH-CN9906772291_1366x768.jpg);
}
.ci-parallax .section-3 {
    background-image: url(img/PeaceCamp_ZH-CN11336027451_1366x768.jpg);
}
.ci-parallax .section-4 {
    background-image: url(img/PowellPano_ZH-CN11170060213_1366x768.jpg);
}
.ci-parallax .section-5 {
    background-image: url(img/TianchiScenery_ZH-CN9945301190_1366x768.jpg);
}

</style>
<h1>iburning<small>.com</small></h1>
<div class="ci-parallax" id="my-parallax">
    <section class="section-1"></section>
    <section class="section-2"></section>
    <section class="section-3"></section>
    <section class="section-4"></section>
    <section class="section-5"></section>
</div>

<script>
function CIParallax() {
    this.el = null;
    this.sections = [];
    this.isDebug = false;
    this.logWarp = null;
}

CIParallax.prototype.init = function(opts) {
    var self = this;
    var el = this.el = opts.el;
    // this.sections = el.querySelectorAll('section');
    this.sections = el.getElementsByTagName('section');
    this.render();

    window.addEventListener('resize', function () {
        self.render();
    });

    if (this.isDebug) {
        var logWarp = this.logWarp = document.create
    }
};

CIParallax.prototype.render = function() {
    var W = window.innerWidth;
    var H = window.innerHeight;

    for (var i = 0; i < this.sections.length; i++) {
        var section = this.sections[i];
        section.style.width = W + 'px';
        section.style.height = H + 'px';
    }
};

// window.addEventListener('load', main);

function main () {
    var parallax = new CIParallax();
    // parallax.init({ el: document.querySelector('#my-parallax') });
    parallax.init({ el: document.getElementById('my-parallax') });
}


</script>
</body>
</html>